<template>
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px"  style="max-width: 300px">
        <el-form-item label="登录账号" prop="userName">
          <el-input v-model="form.userName"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin(ruleFormRef)">登录</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
</template>
<script setup lang="ts">
import type {LoginData} from "../../api/login.ts"
import {reactive, ref} from "vue";
import Store from '../../store/index.ts'
import type {FormInstance, FormRules} from 'element-plus'
import {home} from "../../api/home/home.ts";


const ruleFormRef = ref<FormInstance>()
const form = reactive<LoginData>({
  userName: 'zgq',
  password: '123456',
  code: '999999',
  uuid: 'ufo',

})
const rules = reactive<FormRules<LoginData>>({
  userName: [
    {required: true, message: '请输入账号', trigger: 'blur'},
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change',
    },
  ],
})

const handleLogin = async (ruleFormRef: FormInstance | undefined) => {
  if (!ruleFormRef) return
  await ruleFormRef!.validate((valid, fields) => {
    if (valid) {
      Store().user.login(form)
    } else {
      console.log('error submit!', fields)
    }

  })
}

</script>
<style scoped>

</style>
